<template>
	<div id="email" class="mui-control-content">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-media" v-for="item in newsList">
				<a href="javascript:;">
					<img class="mui-media-object mui-pull-left" :src="item.img">
					<div class="mui-media-body">
						{{item.title}}
						<p class="mui-ellipsis">{{item.content}}</p>
					</div>
				</a>
			</li>
		</ul>

		<div class="mui-card" v-for="(item,idx) in newsCardList">
			<div class="mui-card-header mui-card-media" style="height:40vw;" :style="{backgroundImage: 'url(' +item.img + ')'}"></div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>{{item.title}}</p>
					<p style="color: #333;">{{item.content}}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<span class="mui-icon-extra" :class="[item.isLike ? 'mui-icon-extra-heart-filled' : 'mui-icon-extra-heart']" @click="liked(idx)"></span>
				<a class="mui-card-link">查看更多</a>
			</div>
		</div>

		<ul class="mui-table-view">
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">actionsheet</a>
				<div class="mui-collapse-content">
					<a href="#sheet1" class="mui-btn mui-btn-primary mui-btn-block">actionsheet</a>
				</div>
			</li>
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">面板</a>
				<div class="mui-collapse-content">
					<p>面板2子内容</p>
				</div>
			</li>
			<li class="mui-table-view-cell mui-collapse">
				<a class="mui-navigate-right" href="#">面板3</a>
				<div class="mui-collapse-content">
					<p>面板3子内容</p>
				</div>
			</li>
		</ul>

		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">拍照或录像</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">从相册中选取</a>
				</li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet1">取消</a>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'email',
		data() {
			return {
				newsList: [{
					title: "幸福",
					img: "http://www.dcloud.io/hellomui/images/shuijiao.jpg",
					content: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？"
				}, {
					title: "木屋",
					img: "http://www.dcloud.io/hellomui/images/muwu.jpg",
					content: "想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖."
				}, {
					title: "CBD",
					img: "http://www.dcloud.io/hellomui/images/cbd.jpg",
					content: "烤炉模式的城，到黄昏，如同打翻的调色盘一般."
				}],

				newsCardList: [{
					title: "Posted on January 18, 2016",
					img: "http://www.dcloud.io/hellomui/images/cbd.jpg",
					content: "这里显示文章摘要，让读者对文章内容有个粗略的概念...",
					isLike: false
				}]
			}
		},
		methods:{
			liked(idx){
				if(this.newsCardList[idx].isLike){
					mui.toast("你已经赞过了，不能再赞了！");
				}else{
					this.newsCardList[idx].isLike = true;
					mui.toast("点赞成功！");
				}
			}
		},
		created() {

		}
	}
</script>

<style scoped>

</style>